<script setup lang="ts">
/**
 * 系统管理-系统数据-行政区划
 */
import {onMounted, ref} from "vue";
import {Delete, Edit, Plus, Refresh, Search} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import ChinaEdit from "@/views/systemManagement/data/nationArea/NationAreaEdit.vue";
import {deleteNationAreaApi, getNationAreaTreeListPageApi} from "@/assets/api/systemManagement/data/nationArea";


const form = ref({
  name: '',
  pageNum: 1,
  pageSize: 5,
  total: 0
});

const onSubmit = () => {
  form.value.pageNum = 1;
  getTableData()
};

const onReset = () => {
  form.value.name = '';
};

// 表格数据
const tableData = ref()
const tableLoading = ref(false)
const getTableData = () => {
  tableLoading.value = true
  getNationAreaTreeListPageApi(form.value).then(res => {
    tableLoading.value = false
    if (res.data.code !== 200) {
      ElMessage.error({message: res.data.data, showClose: true})
      return
    }
    tableData.value = res.data.data.records
    form.value.total = res.data.data.total
  })
}

// 页码切换处理器
const handleCurrentChange = () => {
  getTableData()
}

// 新增、编辑弹窗
const dialogVisible = ref(false)
const dialogTitle = ref('')
const editForm = ref() // 编辑的数据
const openDialog = (tag: string, obj: object) => {
  dialogTitle.value = tag
  editForm.value = obj
  dialogVisible.value = true
}

// 编辑修改回调
const saveCallBack = (saved: boolean) => {
  if (saved) {
    dialogVisible.value = false
    getTableData()
  }
}

const deleteChina = (id: number) => {
  ElMessageBox.confirm(
    '确认要删除吗？',
    '重要提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    deleteNationAreaApi(id).then(res => {
      if (res.data.code === 200) {
        ElMessage.success({message: res.data.data, showClose: true})
        getTableData()
      } else {
        ElMessage.error({message: res.data.data, showClose: true})
      }
    })
  })
}

onMounted(() => {
  getTableData()
})

</script>

<template>
  <el-card shadow="never">
    <template #header>
      <el-breadcrumb>
        <el-breadcrumb-item>系统数据</el-breadcrumb-item>
        <el-breadcrumb-item>中国地区</el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    <!-- 搜索 -->
    <el-row style="padding: 0.4%">
      <el-col :span="24">
        <el-form :model="form" :inline="true">
          <el-form-item label="地区名称">
            <el-input v-model="form.name" style="width: 200px" placeholder="请输入地区名称" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" :icon="Search">搜索</el-button>
            <el-button @click="onReset" :icon="Refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 表格工具 -->
    <el-row style="padding: 0.4%">
      <el-col :span="24">
        <el-button type="success" :icon="Plus" @click="openDialog('新增', {})" circle/>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row style="padding: 0.4%">
      <el-col :span="24">
        <el-table
          :data="tableData"
          v-loading="tableLoading"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
        >
          <el-table-column prop="id" label="ID"/>
          <el-table-column prop="code" label="行政区划代码"/>
          <el-table-column prop="name" label="名称"/>
          <el-table-column prop="parentId" label="父节点"/>
          <el-table-column prop="type" label="级别">
            <template #default="scope">
              <span v-if="scope.row.type === '1'">省级</span>
              <span v-if="scope.row.type === '2'">市级</span>
              <span v-if="scope.row.type === '3'">区县</span>
            </template>
          </el-table-column>
          <el-table-column prop="longitude" label="经度"/>
          <el-table-column prop="latitude" label="纬度"/>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" :icon="Edit" @click="openDialog('编辑', scope.row)" circle/>
              <el-button type="danger" :icon="Delete" @click="deleteChina(scope.row.id)" circle/>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :page-size="form.pageSize" v-model:current-page="form.pageNum"
                       @current-change="handleCurrentChange" layout="prev, pager, next" v-model:total="form.total"/>
      </el-col>
    </el-row>
    <!--  新增、编辑弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600"
      :destroy-on-close="true"
    >
      <china-edit :form="editForm" @save="saveCallBack" @close="dialogVisible = false"/>
    </el-dialog>
  </el-card>
</template>

<style scoped>

</style>
